<template>
  <view class="content">
    <view class="searchBox" :style="'padding-top:' + statusBarHeight + 'px;'">
      <text class="icon" @tap="goBack">&#xe64e;</text>
      <view class="search" @tap="goDeliverySearch">
        <u-search style="flex: 1;" placeholder="搜索药品" v-model="searchValue" :show-action="false" :height="72"
          class="searchInput" input-align="left"></u-search>
        <view class="searchBtn">搜索</view>
        <!--  @tap="searchInfo" -->
      </view>
    </view>
    <view class="">
      <u-dropdown style="display: flex; justify-content: start; padding-left:32rpx ;">
        <u-dropdown-item v-model="value1" title="综合排序" :options="options1"></u-dropdown-item>
      </u-dropdown>
    </view>
    <view class="searchList">
      <view v-for="(item, index) in deliveryList" :key="index" class="list">
        <view class="listTop">
          <image style="width: 156rpx; height: 156rpx;" :src="item.img" mode="scaleToFill" />
          <view class="listTopRight">
            <view class="listTitle">
              <text>{{ item.title }}</text>
              <view class="titleTag">商家自送</view>
            </view>
            <view class="listNum">
              <view class="listSales">
                <image src="../static/image/pagesDelivery/Star.png" v-show="indexStar + 1 < item.star"
                  v-for="(itemStar, indexStar) in Math.floor(item.star)" :key="indexStar" mode="scaleToFill" />
                <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="item.star % 1 !== 0"
                  mode="scaleToFill" />
                <text>总销{{ item.num }}</text>
              </view>
              <view class="listTime">
                <text>{{ item.time }}分钟</text>
                <text class="listKm">>{{ item.km }}km</text>
              </view>
            </view>
            <view class="listTag">
              <view class="acclaimTag1 acclaim1">好吃不贵</view>
              <view class="acclaimTag1 acclaim2">价格实惠</view>
              <view class="acclaimTag2 acclaim3">口碑好</view>
              <view class="acclaimTag2 acclaim4">种类全</view>
            </view>
          </view>
        </view>
        <view class="listGoods">
          <view v-for="(itemGoods, indexGoods) in item.goods" :key="indexGoods" class="itemGoods">
            <image :src="itemGoods.img" mode="scaleToFill" />
            <view class="goodsTitle">{{ itemGoods.title }}</view>
            <view class="goodsPrice">
              ￥
              <text>{{ itemGoods.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let that = this
export default {
  data() {
    return {
      searchValue: '',
      statusBarHeight: "",
      value1: 1,
      deliveryList: [
        {
          img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
          title: '标题1',
          star: 2.5,
          num: '888',
          time: '30',
          km: '2',
          text: '1111',
          goods: [
            {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }, {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }, {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }, {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }, {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }
          ]
        },
        {
          img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
          title: '标题1',
          star: 4.8,
          num: '888',
          time: '30',
          km: '2',
          text: '1111',
          goods: [
            {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }, {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }, {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }, {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }, {
              img: 'https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2',
              title: '苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果',
              price: '15.00'
            }
          ]
        },
      ],
      options1: [{
        label: '默认排序',
        value: 1,
      },
      {
        label: '距离优先',
        value: 2,
      },
      {
        label: '价格优先',
        value: 3,
      }
      ],
    }
  },
  onReady() {
  },
  onLoad() {
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
  },
  methods: {
    goDeliverySearch() {
      uni.redirectTo({
        url: '/pagesDelivery/deliverySearch'
      })
    },
    goBack() {
      uni.navigateBack({ delta: 1 })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  background: #F5F5F5;
  min-height: 100vh;
}

.searchBox {
  padding: 32rpx;
  background: #E6E6E6;
  display: flex;
  align-items: center;

  .search {
    display: flex;
    align-items: center;
    flex: 1;
    background: white;
    border-radius: 84rpx;
    margin-left: 16rpx;

    .searchBtn {
      padding: 16rpx 40rpx;
      color: #D12C25;
    }
  }
}

.searchList {
  .list {
    background: white;
    border-radius: 8rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;

    .listTop {
      display: flex;

      image {
        width: 156rpx;
        height: 156rpx;
        border-radius: 6rpx;
      }

      .listTopRight {
        margin-left: 24rpx;
        flex: 1;

        .listTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
            font-style: normal;
          }

          .titleTag {
            width: 120rpx;
            height: 36rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1rpx solid #A1A2B2;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #A1A2B2;
            font-style: normal;
            border-radius: 8rpx;
          }
        }

        .listNum {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
          height: 36rpx;
          font-style: normal;
          margin: 18rpx 0;

          .listSales {
            display: flex;
            align-items: center;

            image {
              width: 24rpx;
              height: 22rpx;
              margin-right: 4rpx;
            }

            text {
              margin-left: 12rpx;
            }
          }

          .listTime {
            display: flex;
            align-items: center;

            .listKm {
              margin-left: 12rpx;
            }
          }
        }

        .listTag {
          display: flex;
          align-items: center;

          .acclaimTag1 {
            width: 96rpx;
            height: 28rpx;
            line-height: 28rpx;
            font-family: PingFang SC, PingFang SC;
            border-radius: 18rpx;
            font-weight: 400;
            font-size: 20rpx;
            text-align: center;
            font-style: normal;
            margin-right: 12rpx;
          }

          .acclaimTag2 {
            width: 76rpx;
            height: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            line-height: 28rpx;
            text-align: center;
            font-style: normal;
            border-radius: 18rpx;
            margin-right: 12rpx;
          }

          .acclaim1 {
            background: rgba(255, 0, 0, 0.1);
            color: #FF0000;
          }

          .acclaim2 {
            background: rgba(0, 87, 255, 0.1);
            color: #0057FF;
          }

          .acclaim3 {
            color: #16D356;
            background: rgba(22, 211, 86, 0.1);
          }

          .acclaim4 {
            color: #FFC123;
            background: rgba(255, 193, 35, 0.1);
          }
        }
      }
    }

    .listGoods {
      display: flex;
      overflow-x: auto;
      margin-top: 24rpx;

      .itemGoods {
        width: 156rpx;
        margin-right: 20rpx;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 132rpx;
          border-radius: 12rpx;
        }

        .goodsTitle {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 33rpx;
          font-style: normal;
          margin-top: 18rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 定义文本的行数 */
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .goodsPrice {
          font-size: 20rpx;
          font-family: PingFang SC, PingFang SC;
          color: #D12C25;
          font-style: normal;

          text {
            font-size: 28rpx;
          }
        }
      }
    }
  }
}

::v-deep .searchInput .u-content {
  background-color: white !important;
  padding-right: 0 !important;
}

::v-deep .searchInput .u-input {
  background-color: white !important;
}

.searchList {
  padding: 24rpx 32rpx;
}
</style>
